<template>
	<view class="cart-container" v-if="cart.length !== 0">
		<!-- 收货地址组件 -->
		<my-address></my-address>

		<!-- 商品列表的标题区域 -->
		<view class="cart-title">
			<!-- 左侧的图标 -->
			<uni-icons type="shop" size="18"></uni-icons>
			<!-- 右侧的文字 -->
			<text class="cart-title-text">购物车</text>
		</view>

		<!-- 购物车商品信息 -->
		<uni-swipe-action>
			<block v-for="(item,index) in cart" :key="index">
				<uni-swipe-action-item :right-options="options">
					<my-goods :goods='item' :showRadio="true" @radio-change="radioChangeHandler" :showNum="true"
						@num-change="numChangeHandler"></my-goods>
					<!-- 因为 uni-swipe-action-item 组件点击事件在微信开发工具的BUG报错 使用插槽 slot 代替 -->
					<template v-slot:right>
						<view class="slot-button" @click="swipeActionClickHandler(item)">
							<text class="slot-button-text">删除</text>
						</view>
					</template>
				</uni-swipe-action-item>
			</block>
		</uni-swipe-action>

		<!-- 商品结算信息 -->
		<my-settle></my-settle>
	</view>
	<view class="empty-cart" v-else>
		<image src="/static/cart_empty@2x.png" class="empty-img"></image>
		<text class="tip-text">空空如也！</text>
	</view>
</template>

<script src="./cart.js"></script>

<style lang="scss">
	@import './cart.scss'
</style>
